<template>
	<div>
		<div class="bg-color-white pad-20">


			<!--顶部搜索 -->
			<div class="top-operate-default flex-col" style="align-items: baseline; padding: 20px 0; height: 100%; ">
				<div class="search-item">
					<label>搜索订单：</label>
					<el-select v-model="textCol">
						<el-option label="订单号" value="orderNo"></el-option>
						<el-option label="售后单号" value="afterSaleNo"></el-option>
						<el-option label="商品名称" value="goodsTitle"></el-option>
						<el-option label="门店名称" value="storeName"></el-option>
						<el-option label="微客昵称" value="customerNickname"></el-option>
						<el-option label="微客手机号" value="customerPhone"></el-option>
						<el-option label="外部编码" value="externalCode"></el-option>
					</el-select>
					<el-input v-model="textValue" placeholder="请输入内容" style="width: 200px"></el-input>
					<label class="mar-l-20">订单类型：</label>
					<el-select v-model="defaultQuery.deliveryType" placeholder="请选择" class="takeSelect">
						<el-option v-for="item in storeOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
					<label class="mar-l-20">出入账类型：</label>
					<el-select v-model="defaultQuery.billType" placeholder="请选择" class="takeSelect">
						<el-option label="全部" value="0"></el-option>
						<el-option label="入账" value="1"></el-option>
						<el-option label="出账" value="2"></el-option>
					</el-select>
					<label class="mar-l-20">时间筛选：</label>
					<el-date-picker v-model="timeValue" type="datetimerange" range-separator="至"
						value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
						start-placeholder="创建日期">
					</el-date-picker>

					<el-button-group class="mar-l-20">
						<el-button type="primary" @click="doSearch">查询</el-button>
						<el-button @click="doResetSearch">重置</el-button>
					</el-button-group>
				</div>


				<!-- <div class="pad-t-10">
          <el-button v-if="getVersionType() == 5 && order.orderStatus == 1" @click="generateDelivery" type="primary">生成配送单</el-button>
          <el-button @click="exportOrder">导出</el-button>
        </div> -->
			</div>
			<!-- 全选、操作 -->
			<div class="pad-t-15 pad-b-15 font-14 v-align-c">
				<el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span
						class="mar-l-20">当页全选</span></el-checkbox>
				<span class="pad-l-4 pad-r-4">|</span>
				<div class="width-80">已选{{multipleSelection.length}}项</div>
				<el-button @click="exportOrder">批量导出</el-button>
			</div>
			<!-- 内容列表 -->
			<div class="table-container">
				<el-table ref="multipleTable" :data="dataList" @selection-change="handleSelectionChange"
					v-loading="listLoading" element-loading-text="加载中">
					<el-table-column width="50px" type="selection"></el-table-column>
					<el-table-column width="120px" label="来源店铺" prop="storeName"></el-table-column>
					<el-table-column width="80px" label="订单类型" prop="deliveryType">
						<template slot-scope="scope">
							{{ deliveryTypeName[scope.row.deliveryType] }}
						</template>
					</el-table-column>
					<el-table-column width="180px" label="订单号" prop="orderNo"></el-table-column>
					<el-table-column width="180px" label="售后单号" prop="afterSaleNo"></el-table-column>
					<el-table-column width="120px" label="外部编码" prop="externalCode"></el-table-column>
					<el-table-column width="250px" label="商品名称" prop="goodsTitle"></el-table-column>
					<el-table-column width="120px" label="零售价" prop="goodsPrice"></el-table-column>
					<el-table-column width="50px" label="数量" prop="goodsNum"></el-table-column>
					<el-table-column width="90px" label="金额" prop="goodsPayAmount">
						<template slot-scope="scope">
							{{ scope.row.afterSaleNo==''?scope.row.goodsPayAmount:'-'+scope.row.goodsPayAmount}}
						</template>
					</el-table-column>
					<el-table-column width="80px" label="类型" prop="afterSaleNo">
						<template slot-scope="scope">
							{{ scope.row.afterSaleNo==''?'入账':'出账'}}
						</template>
					</el-table-column>
					<el-table-column width="90px" label="优惠券" prop="couponReduceAmount"></el-table-column>
					<el-table-column width="80px" label="运费/配送费" prop="freight"></el-table-column>
					<el-table-column width="160px" label="创建时间" prop="createTime"></el-table-column>
				</el-table>
			</div>
			<!-- 列表分页 -->
			<div class="pagination">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]"
					:page-size="searchListQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import { pagingGetOrderGoodsReport, exportPagingGetOrderGoodsReport } from '@/api/goods/order'
	import { getToken } from '@/utils/auth'
	import { getDictByGroupName	} from '@/api/common/common'

	export default {
	  data() {
	    return {
	      storeOptions: [{
	        value: '0',
	        label: '全部'
	      }, {
	        value: '5',
	        label: '配送到家'
	      }, {
	        value: '4',
	        label: '到店自提'
	      }, {
	        value: '3',
	        label: '社区团购'
	      }, {
	        value: '1',
	        label: '物流快递'
	      }],
	      enterpriseConfig: {},
	      // 文本model
	      textCol: 'orderNo',
	      textValue: '',
	      // 时间model
	      timeCol: 'createTime',
	      timeValue: [],
	      // tab model
	      orderStatus: '1',
	      // 默认查询条件
	      defaultQuery: {
	        currentPage: 1,
	        size: 10,
	        enterpriseId: '',
	        billType: '0',
	        deliveryType: '0'
	      },
	      promotionId: '',
	      recruiterId: '',
	      memberId: '',
	      // 查询条件
	      searchListQuery: {},
	      deliveryTypeName: {},
	      total: 0,
	      listLoading: true,
	      dataList: [],
	      labels: {
	        '0': '待付款(0)',
	        '1': '待发货(0)',
	        '20': '部分发货(0)',
	        '2': '待收货(0)',
	        '3': '已收货(0)',
	        '4': '已完成(0)',
	        '-2': '已取消(0)',
	        '100': '全部订单(0)'
	      },
	      villageList: [],
	      orderTimeColName: '时间',
	      orderTimeColNames: {
	        '0': '下单时间',
	        '1': '支付时间',
	        '2': '发货时间',
	        '4': '完成时间'
	      },
	      orderTimeCol: 'createTime',
	      orderTimeCols: {
	        '0': 'createTime',
	        '1': 'payTime',
	        '2': 'deliveryTime',
	        '4': 'completeTime'
	      },
	      showStatOrder: 1,
	      allChecked: false,
	      // 选择订单id
	      selectOrderId: '',
	      // 选中订单id集合
	      selectOrderIds: [],
	      token: '',
	      importFile: '',
	      importFileName: '',
	      multipleSelection: []
	    }
	  },
	  // 初始化页面
	  created() {
	    this.token = {
	      accessToken: getToken()
	    }
	    const queryParams = this.getCurrentPage().query
	    if (queryParams.startEndTime) {
	      this.timeValue = queryParams.startEndTime
	    }
	    if (queryParams.orderStatus) {
	      this.orderStatus = queryParams.orderStatus
	    }
	    this.searchListQuery = {
	      ...this.defaultQuery
	    }
	    this.initList()
	  },
	  methods: {
	    // 初始化
	    initList() {
	      this.listLoading = true
	      this.setSearchListQuery()
	      pagingGetOrderGoodsReport(this.searchListQuery).then(response => {
	        this.listLoading = false
	        if (response.isError) return
	        this.total = response.data.total
	        this.dataList = response.data.records
	      })
	      // 获取数字字典
	      getDictByGroupName('ProjectOrderDTO').then(response => {
	        this.deliveryTypeName = response.data.deliveryType
	      })
	    },
	    // 设置查询条件
	    setSearchListQuery() {
	      const currentPage = this.searchListQuery.currentPage
	      const size = this.searchListQuery.size
	      this.searchListQuery = {
	        ...this.defaultQuery
	      }
	      this.searchListQuery.memberId = this.getMemberId()
	      this.searchListQuery.currentPage = currentPage
	      this.searchListQuery.size = size
	      this.searchListQuery.enterpriseId = this.getEnterpriseId()
	      this.searchListQuery[this.textCol] = this.textValue
	      this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
	      this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
	    },
	    // 查询事件
	    doSearch() {
	      this.searchListQuery.currentPage = 1
	      this.initList()
	    },
	    // 重置事件
	    doResetSearch() {
	      const originData = this.$options.data()
	      this.textCol = originData.textCol
	      this.textValue = originData.textValue
	      this.timeCol = originData.timeCol
	      this.timeValue = originData.timeValue
	      this.defaultQuery = originData.defaultQuery
	      this.doSearch()
	    },
	    // tab切换事件
	    doChangeTab() {
	      this.searchListQuery.currentPage = 1
	      this.initList()
	    },
	    exportOrder() {
	      this.searchListQuery.selectionOrderGoodsList = this.multipleSelection
	      exportPagingGetOrderGoodsReport(this.searchListQuery).then(response => {
	        if (response.isError) return
	        this.$message({
	          type: 'success',
	          message: '已执行批量导出-请到报表中心下载！'
	        })
	      })
	    },
	    selectAll() {
	      if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.dataList.length) {
	        this.dataList.forEach(item => {
	          this.$refs.multipleTable.toggleRowSelection(item, true)
	        })
	      } else {
	        this.$refs.multipleTable.clearSelection()
	      }
	    },
	    // 勾选事件
	    handleSelectionChange(val) {
	      this.multipleSelection = val
	      if (this.multipleSelection.length === this.dataList.length) {
	        this.allChecked = true
	      } else {
	        this.allChecked = false
	      }
	    },
	    // 更改当前页数
	    handleCurrentChange(val) {
	      this.searchListQuery.currentPage = val
	      this.initList()
	    },
	    // 更改当前页面大小
	    handleSizeChange(val) {
	      this.searchListQuery.size = val
	      this.initList()
	    }
	  }
	}
</script>

<style lang="less" scoped>
	.user-avatar {
		width: 65px;
		height: 65px;
		display: block;
		padding: 1px;
		border: #efefef 1px solid;
	}

	.goods-title {
		color: #155bd4;
		line-height: 1.2;
	}

	// 2行文字展示
	.line-2 {
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-word;
	}
</style>
